<template>
  <el-dialog
    title="关联人员"
    :visible.sync="isShow"
    :before-close="handleClose"
    :destroy-on-close="!isShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    lock-scroll
    custom-class="crud-dialog small"
    center
    ><div class="flex-1 auto dialog-content">
      <avue-form ref="form" v-model="form" :option="formOption">
        <!-- <div slot-scope="{disabled,size}">
        123123
      </div> -->
        <template slot="userIdsTags">
          <div>
            <el-tag v-for="(u, key) in selectedUsers" :key="key" closable size="small" @close="removeSelectedUser(u)" class="u-tag">{{ u.realname }}</el-tag>
          </div>
        </template>
      </avue-form>
    </div>
    <div class="flex flex-center dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { editRoleList, setRoleUser, getPostList, getDepartList } from '@/api/role'
import { getUserByPostId, getUserByRoleId, getUserByParams } from '@/api/user'
import { formOption } from './option'

export default {
  data() {
    return {
      isShow: false,
      departList: [],
      postList: [],
      userList: [],

      allUsers: [],
      selectedUsersIds: [],

      form: {
        roleId: '',
        userIds: [],
        userId: '',
        postId: '',
        departId: '',
        roleName: ''
      },
      roleCode: '' // 用来判断是不是超管
    }
  },
  computed: {
    formOption() {
      return formOption.call(this)
    },
    allUsersMap() {
      return this.allUsers.reduce((pre, row) => ({ ...pre, [row.id]: row }), {})
    },
    selectedUsers() {
      return this.selectedUsersIds.map((id) => this.allUsersMap[id]).filter((row) => row && row.id)
    }
  },
  created() {},
  mounted() {},
  methods: {
    open(row) {
      // 拿部门数据
      this.getDepart()
      // this.getUser()
      this.roleCode = row.roleCode
      this.form.roleName = row.roleName
      this.form.roleId = row.id
      // 给人员赋值
      this.initUserByRoleId()
      this.isShow = true
    },
    initForm() {
      this.form = {
        roleId: '',
        userIds: [],
        userId: '',
        postId: '',
        departId: '',
        roleName: ''
      }
      this.departList = []
      this.postList = []
      this.userList = []
      this.userListDefault = []
      this.selectedUsersIds = []
      this.allUsers = []
    },
    // 部门
    getDepart() {
      getDepartList({ pageNo: 1, pageSize: 99999 }).then((res) => {
        this.departList = res.result[0]?.childList
      })
    },
    // 职位
    getPost() {
      getPostList({
        pageNo: 1,
        pageSize: 99999,
        deptId: this.form.departId
      }).then((res) => {
        this.postList = res.result.records
        // console.log("职位" + this.postList);
      })
    },
    // 用户
    getUser() {
      getUserByParams({ postId: this.form.postId, deptId: this.form.departId }).then((res) => {
        this.userList = res.result
        if (this.allUsers.length == 0) {
          this.allUsers = res.result
        }
      })
    },

    initUserByRoleId() {
      getUserByRoleId({ roleId: this.form.roleId }).then((res) => {
        const userIds = res.result || []
        // this.selectedUsers = userIds
        this.selectedUsersIds = userIds.map((item) => item.id)
        // let userId = ''
        // if (Array.isArray(userIds) && userIds.length > 0) {
        //   userId = this.form.userIds[0]
        // }
        // getUserByPostId().then((res) => {
        //   const arr = res.result.filter((item) => {
        //     return userIds.includes(item.id);
        //   });
        //   this.userList = arr;

        //   this.selectedUsersIds = userIds;

        //   this.form.userIds = userIds
        //   this.form.userId = userId;
        // });
      })
    },
    handleClose() {
      this.initForm()
      this.isShow = false
    },

    handleSubmit() {
      const data = { ...this.form }
      data.userIds = this.selectedUsersIds
      data.userId = data.userIds.length > 0 ? data.userIds[0] : ''

      setRoleUser(data).then((res) => {
        // console.log(res);
        if (res.success === true) {
          this.$message.success('关联成功')
          this.$emit('ok')
          this.handleClose()
        }
      })
    },

    removeSelectedUser(u) {
      this.selectedUsersIds = this.selectedUsersIds.filter((id) => id != u.id)
      this.form.userIds = this.form.userIds.filter((id) => id != u.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.u-tag {
  margin-right: 6px;
  margin-bottom: 4px;
}
</style>
